<template>
  <div class="fixed inset-0 w-full h-full transition-opacity duration-1000">
    <!-- 预加载所有背景图片 -->
    <div class="hidden">
      <img v-for="(bg, index) in backgrounds" 
           :key="index" 
           :src="bg" 
           @load="preloadImage(index)" />
    </div>
    
    <!-- 当前显示的背景图片 -->
    <div v-for="(bg, index) in backgrounds" 
         :key="index"
         class="absolute inset-0 w-full h-full transition-opacity duration-500"
         :style="{ opacity: currentSection === index ? 1 : 0 }">
      <img :src="bg"
           alt="background"
           class="absolute inset-0 w-full h-full object-cover object-center"
           :style="{ opacity: preloadedImages[index] ? 0.75 : 0 }"
      />
    </div>
    
    <!-- 调整遮罩层 -->
    <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/70 to-black/70"></div>
    <div class="absolute inset-0 backdrop-blur-[5px]"></div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 1. 首先定义 props
const props = defineProps({
  currentSection: {
    type: Number,
    default: 0
  }
})

// 2. 然后定义其他响应式变量和常量
const backgrounds = [
  'https://objectstorageapi.bja.sealos.run/g6rnmc1y-yunshang/wan_ip/123.jpg',
  'https://objectstorageapi.bja.sealos.run/g6rnmc1y-mymy/hero-bg.jpg',
  'https://objectstorageapi.bja.sealos.run/g6rnmc1y-yunshang/wan_ip/contact-bg.jpg'
]

// 跟踪每个图片的预加载状态
const preloadedImages = ref(backgrounds.map(() => false))

const preloadImage = (index) => {
  preloadedImages.value[index] = true
}

// 不再需要单独的 imageLoaded 和 currentImage
watch(() => props.currentSection, (newSection) => {
  // 不需要重置加载状态，因为图片已经预加载
}, { immediate: true })
</script>

<style scoped>
.backdrop-blur {
  backdrop-filter: blur(1px);
}

/* 优化图片加载动画 */
img {
  transition: opacity 0.5s ease-in-out;
  will-change: opacity;
}
</style> 